函數限流

• 當使用者點擊網頁上某個按鈕後會從後端伺服器進行資料的請求，在資料請求回傳前，使用者持續點擊不僅無效，且浪費，或是當網頁中某按鈕會導致網頁更新， 我們需要限制使用者對其頻繁地操作。
• 這時就會需要用到限流，常見的限流方案是根據時間間隔進行限流的，表示在指令的時間間隔內不允許重複執行同一函數。

實現一個簡易的限流

• 這個程式，是直接使用一個變數來控制按鈕事件是否可觸發，觸發按鈕事件時，對此變數進行修改，並使用setTimeout函數來控制2秒後將變數的值還原。
• 執行後，點擊頁面上的按鈕，可以從VS Code的主控台看到，無論按鈕被點擊多少次，都會依照每2秒最多列印一次的列印方法進行限流。
• 這段程式中，限流是一種通用邏輯，列印時間則是業務邏輯，因此可以將限流的邏輯封裝成單獨的工具方法，
  修改核心JavaScript程式如下：

var throttle = false                         //限流變數
function throttleTool(callback, timeout) {   //包裝的限流函數
    if (!throttle) {                         //如果未被限流，則直接執行包裝的回呼函數
        callback()
    }else {                                  //如被限流，則直接傳回
        return
    }
    throttle = true                          //修改限流變數
    setTimeout(() => {                       //延遲時間指定時間後恢復限流變數
        throttle = false
    }, timeout)
}
const App = {
    methods: {
        click() {
            throttleTool(() => {
                console.log(Date())
            },2000)
        }
    }
}
Vue.createApp(App).mount("#Application")

• 這樣就擁有了一個限流工具，接下來就能夠為任意函數增加限流功能，並且可以任意設定限流的時間間隔。

今天的介紹就先到這邊，明天會介紹表單資料的雙向綁定！